<template>
	<view class="content">
		<u-search v-model="value" @change="change" @custom="custom" @search="search" :placeholder="placeholder"
			:show-action="false" @clear="clear" :customStyle="{
				'flex-grow': '1',
				'margin': '0 25rpx',
			}">
		</u-search>
		<view @click="rightClick()">
			<text v-if="showScreen" style="color: white;margin-right: 20rpx;" @click="screenClick">筛选</text>
			<slot name="right"></slot>
		</view>
		
	</view>
</template>

<script>
	export default {
		name: "search",
		props: {
			placeholder: {
				type: String,
				default: '请输入搜索关键字'
			},
			showScreen:{
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				value: '',
				timeout:null,
			};
		},
		methods: {
			change(value) {
				// 搜索框内容变化时，会触发此事件，value值为输入框的内容
				console.log("change+++++"+value);
				if(this.timeout){
					clearTimeout(this.timeout);
				}
				
				this.timeout = setTimeout(()=>{
					this.search(value);
				}, 1000);
				
				
			},
			custom(value) {
				console.log("custom+++++"+value);
				this.$u.toast('输入值为：' + value)
			},
			search(value) {
				console.log("search+++++"+value);
				this.$emit('input', value);
			
			
				// this.$refs.uToast.show({
				// 	title: '搜索内容为：' + value,
				// 	type: 'success'
				// })
			},
			clear() {
				// console.log(this.value);
			},
			
			rightClick(){
				this.$emit('rightclick', true)
			},
			
			screenClick(){
				this.$emit('goScreen', true)
			}
		}
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		width: 100%;
		height: 100rpx;
		background-color: $blue15;
		align-items: center;
	}

	// u-search {
	// 	flex-grow: 1;
	// 	margin: 0 25rpx;
	// }
</style>
